<template>
  <div>
    <van-picker
      show-toolbar
      title="性别"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="$emit('close')"
      @change="pickerChange"
      :default-index="defaultIndex"
    />
  </div>
</template>

<script>
export default {
  name: 'EditSex',
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      columns: ['男', '女'],
      defaultIndex: this.value
    }
  },
  methods: {
    // 改变函数，三个参数 picker 实例，改变的内容以及下标
    pickerChange (picker, val, index) {
      this.defaultIndex = index
    },
    async onConfirm () {
      this.$toast.loading({
        message: '保存中！',
        forbidClick: true
      })
      try {
        await this.$https.patch('/app/v1_0/user/profile', {
          gender: this.defaultIndex
        })
        this.$emit('input', this.defaultIndex)
        this.$emit('close')
        this.$toast.success('修改成功！')
      } catch (error) {
        this.$$toast.fail('修改失败！')
      }
    }
  }
}
</script>

<style>
</style>
